<template>
	<view class="page-contain">
		<view class="head-contain" :style="{ paddingTop: headerArea.status_height + 'px' }">
			<view :style="{ height: headerArea.title_height + 'px' }" />
			<view class="user_info">
				<view class="user_avatar"><uv-avatar :src="src" size="64" /></view>
				<view class="user_detail">
					<view class="user_name">团餐平台用户</view>
					<view class="user_phone">{{ 'o0il_6qtra38x0t4-' }}</view>
				</view>
			</view>
		</view>
		<view class="personal-list">
			<uv-cell-group v-for="(item, index) in indexList" :key="index" :border="false">
				<uv-cell class="personal-cell" titleStyle="color:#333333;font-size:14px;line-height: 32px;"
					:title="item.name" :border="false" isLink :url="item.path">
					<template v-slot:icon>
						<uv-icon size="16" :name="item.icon" color="#3f95ff" style="padding-right: 12rpx;"/>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>
	</view>
</template>
pn
<script>
	export default {
		data() {
			return {
				src: '/static/images/avatar.png',
				indexList: [{
						id: '1',
						name: '外卖订单',
						icon: 'map-fill',
						path:'/pages/takeaway/orderList'
					},
					{
						id: '2',
						name: '帮助说明',
						icon: 'error-circle-fill'
					},
					{
						id: '3',
						name: '联系客服',
						icon: 'server-fill'
					}
				]

			}
		},
		computed: {
			headerArea() {
				let area = uni.getSystemInfoSync();
				// #ifdef MP-WEIXIN
				let menu = uni.getMenuButtonBoundingClientRect();
				return {
					status_height: area.statusBarHeight,
					title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
					menuLeft: menu.left
				};
				// #endif
				// #ifndef MP-WEIXIN
				return {
					status_height: area.statusBarHeight,
					title_height: uni.upx2px(80),
					menuLeft: 0
				};
				// #endif
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.page-contain {
		position: absolute;
		background-color: #f6f6f6;
		width: 100%;
		height: 100%;

		.head-contain {
			width: 100%;
			position: relative;
			z-index: 99;
			top: 0;
			margin: auto;
			overflow: hidden;

			&:after {
				content: '';
				position: absolute;
				width: 100%;
				height: calc(100% + 40px);
				z-index: -1;
				top: 0;
				margin: auto;
				background: url('../../static/images/background.jpg');
				background-repeat: no-repeat;
				background-size: cover;
			}

			.user_info {
				padding: 0 48rpx 160rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.user_avatar {
					width: 64px;
					padding-right: 24rpx;
				}

				.user_detail {
					flex: 1;

					.user_name {
						font-size: 18px;
						color: #ffffff;
						font-weight: 500;
						line-height: 50rpx;
					}

					.user_phone {
						font-size: 15px;
						color: #ffffff;
						font-weight: 400;
						line-height: 50rpx;
					}
				}
			}
		}

		.personal-list {
			margin: 14rpx 20rpx;
			border-radius: 20rpx;
			padding: 20rpx 0;
			overflow: hidden;
			background-color: #ffffff;
			margin-top: -80rpx;
			position: relative;
			z-index: 99;

			.personal-cell {
				background-color: #fff;
			}
		}

	}
</style>